<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref, watch} from "vue";
import {ArrowRight, ArrowRightBold, CaretRight, Fold} from '@element-plus/icons-vue'
const route = useRouter()
const lists = ref(route.currentRoute.value.matched)
   console.log(lists.value)
watch(route.currentRoute,()=>{
   lists.value = route.currentRoute.value.matched

})

</script>

<template>

  <el-breadcrumb :separator-icon="CaretRight" >
      <el-breadcrumb-item :to="{ name: 'dash' }" class="el-breadcrumb-item">首页</el-breadcrumb-item>
      <template v-for="(v,k) in lists" >
    <el-breadcrumb-item class="el-breadcrumb-item"   v-if="k<=2&&k>=1&& v.meta.title!=='首页'">
       {{ v.meta.title }}
    </el-breadcrumb-item>
          </template>

  </el-breadcrumb>

</template>

<style scoped>

.el-breadcrumb-item{
   @apply  ;
}
</style>